import './Scss/EnvironmentTemperature.scss'
import { useState, useEffect } from 'react'
import { ICON } from '../../../../Common/Configure/Icon'

export const EnvironmentTemperature001 = ({ data }) => {
    const [Data, setData] = useState([])
    useEffect(() => {
        setData([
            { uuid: '1', icon: ICON['wendu'], title: '温度', value: data?.temperature, unit: '°C' },
            { uuid: '2', icon: ICON['shidu'], title: '湿度', value: data?.humidity, unit: '%RH' },
            { uuid: '3', icon: ICON['fengji'], title: '风级', value: data?.windLevel, unit: '级' },
            { uuid: '4', icon: ICON['fengxiang'], title: '风向', value: data?.windDirection, unit: '' },
            { uuid: '5', icon: ICON['fengsu'], title: '风速', value: data?.windSpeed, unit: 'm/s' },
        ])
    }, [data])

    return (
        <div className="EnvironmentTemperature001">
            {Data.map(({ uuid, icon, title, value, unit }) => (
                <div key={uuid}>
                    {icon}
                    <div>
                        <div>{title}</div>
                        <div>
                            <div>{value}</div>
                            <div>{unit}</div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )
}
